<template>
    <div class='EditDetails'>
        <btm-edit-anim :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)" class="buttom-operate" :is-effect="pageSize > 300">
            <template #pagination>
                <el-scrollbar always>
                    <el-pagination small layout="total, sizes, prev, pager, next" :page-sizes="page_sizes" :total="total" :pager-count="5" 
                    :page-size="pageSize" @update:page-size="$emit('update:page-size', $event)"
                    :current-page="page" @update:current-page="$emit('update:current-page', $event)"
                    @current-change="$emit('current-change', $event)" @size-change="$emit('size-change', $event)">
                    </el-pagination>
                </el-scrollbar>
            </template>
            <edit-key v-if="modelValue" :select_item="select_item" @edit="$emit('edit', $event)"/>
        </btm-edit-anim>
    </div>
</template>

<script>
import { page_sizes } from '@/settings'
import BtmEditAnim from '../comps/BtmEditAnim'
import EditKey from '../comps/EditKey'
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    name: 'EditDetails',
    components: { BtmEditAnim, EditKey },
    setup(omprops, content) {
        const state = reactive({
            page_sizes
        })
        return toRefs(state)
    },
    props: {
        modelValue: Boolean,
        pageSize: Number,
        total: Number,
        page: Number,
        type: String,
        select_item: [Object, String]
    },
})
</script>